#jobs {
  position: relative;
}

#bars {
  position: relative;
  top: 20px; /* Space for pull counter */
  left: 100px; /* Space for some left buffs */
}

#jobs-container.hide {
  display: none;
}

/* Bars */

/* Relative to #bars */
#pull-bar,
#hp-bar,
#mp-bar,
#mp-tick,
#cp-bar,
#gp-bar {
  width: 202px;
  height: 7px;
  margin-top: 1px;
}

#pull-bar {
  position: absolute;
  left: 100px;
  top: 0;
  height: 18px;
  font-size: 12px;
}

div.justbuffs div#bars,
div.justbuffs div#procs-container {
  display: none;
}

/** force non-transparent when you are crafter/gatherer */
#jobs.crafter > #opacity-container,
#jobs.gatherer > #opacity-container {
  opacity: 1 !important;
}

#mp-bar,
#gnb-bar,
#mnk-bar,
#rdm-bar {
  margin-top: 1px;
}

#hp-bar.show-number {
  height: 32px;
}

#mp-bar.show-number,
#cp-bar,
#gp-bar {
  height: 18px;
}

.mnk #hp-bar {
  height: 10px;
}

.pld #hp-bar,
.drk #hp-bar,
.whm #hp-bar,
.sch #hp-bar,
.ast #hp-bar,
.blu #hp-bar {
  height: 18px;
}

.blm #mp-bar {
  height: 24px;
}

.bar-container {
  position: relative;
  width: 202px;
  height: 0;
  background: rgba(30, 30, 30, 0.7);
}

.timer-bar {
  display: block;
  position: relative;
  width: 100%;
  height: 8px;
  margin-top: 1px;
}

/* Relative to #bars */
#rdm-bar {
  position: relative;
  border: 1px solid black;
  width: 200px; /* 202 minus borders */
  height: calc(8px * 2 - 4px);
  background: rgba(30, 30, 30, 0.7);
}

#rdm-bar .marker {
  position: absolute;
  height: 100%;
}

#rdm-bar .marker.even {
  background: rgba(0, 0, 0, 0.7);
}

/* Relative to #rdm-bar */
#rdm-white-bar,
#rdm-black-bar {
  display: block;
  position: relative;
  margin: -1px -1px -2px -1px;
  width: 100%;
  height: calc(100% - 4px);
}

/* Boxes */

/* Relative to #bars */
.box-container {
  display: flex;
  position: absolute;
  left: 202px;
  top: 0;
}

/*
  Fit the exact height of the bars if not too small
  Height of default/HP bar(show number)
*/
.box-container > div {
  display: inline-block;
  margin-left: 4;
  border: 1px solid rgba(0, 0, 0, 0.7);
  width: 29px;
  height: 29px;
}

.box-container .text {
  text-align: center;
  position: relative;
  top: 5px;
  font-size: 16px;
  line-height: 1.1em;
}

/* Height of HP + MP bar(show number) */
#pld-boxes > div,
#drk-boxes > div,
#whm-boxes > div,
#sch-boxes > div,
#ast-boxes > div {
  width: 35px;
  height: 35px;
}

#pld-boxes .text,
#drk-boxes .text,
#whm-boxes .text,
#sch-boxes .text,
#ast-boxes .text {
  text-align: center;
  position: relative;
  top: 6px;
  font-size: 20px;
}

/* Height of something special */
#smn-boxes > div,
#rdm-boxes > div {
  width: 28px;
  height: 28px;
}

#smn-boxes .text,
#rdm-boxes .text {
  text-align: center;
  position: relative;
  top: 5px;
  font-size: 16px;
}

#mnk-boxes > div,
#blm-boxes > div {
  width: 30px;
  height: 30px;
}

#mnk-boxes .text,
#blm-boxes .text {
  text-align: center;
  position: relative;
  top: 6px;
  font-size: 16px;
}

/* Left box */
.blm-umbral-timer {
  position: absolute;

  /* fix this hack by using better layout primitives */
  left: -242px;
  background-color: rgba(0, 0, 0, 0.3);
}

/* Side Icons */
.big-buff {
  border: 1px solid black;
  width: 44px;
  height: 32px;
}

/* Relative to #bars */
#left-side-icons {
  position: absolute;
  left: -2px;
}

.blm #left-side-icons {
  left: -40px;
}

/* Relative to #bars, default for 1 small box */
#right-side-icons {
  position: absolute;
  left: 242px;
}

/* Space for no resource box */
.blu #right-side-icons {
  left: 204px;
}

/* Space for 2 resource boxes */
.drg #right-side-icons,
.sam #right-side-icons,
.brd #right-side-icons,
.mch #right-side-icons,
.dnc #right-side-icons,
.smn #right-side-icons,
.rdm #right-side-icons {
  left: 278px;
}

/* Space for 1 big resource box */
.drk #right-side-icons,
.nin #right-side-icons {
  left: 250px;
}

/* Space for 2 big resource box */
.pld #right-side-icons,
.whm #right-side-icons,
.sch #right-side-icons,
.ast #right-side-icons {
  left: 288px;
}

.justbuffs #right-side-icons {
  position: fixed;
  left: 0;
}

/* Stacks */
.stacks {
  display: flex;
  margin-top: 1px;
  width: 202px;
  height: 12px;
  align-items: stretch;
}

.stacks > * {
  display: flex;
  margin-right: 2px;
  flex: 1;
  width: 100%;
  height: 100%;
  align-items: stretch;
}

.stacks > * > * {
  background-color: rgba(174, 227, 235, 0.2);
  margin-right: 2px;
  display: inline-block;
  border: 1px solid black;
  height: 100%;
  flex: 1;
}

.stacks :last-child {
  margin-right: 0;
}

#blm-stacks-xeno > div {
  background-color: rgba(66, 19, 128, 0.2);
}

#whm-stacks-bloodlily > div.active {
  background-color: rgb(190, 43, 30);
}

#sge-stacks-addersgall > div.active {
  background-color: rgb(120, 170, 250);
}

#sge-stacks-addersting > div.active {
  background-color: rgb(195, 85, 155);
}

#sam-stacks-setsu.active {
  background-color: rgb(139, 209, 242);
}

#sam-stacks-getsu.active {
  background-color: rgb(185, 185, 242);
}

#sam-stacks-ka.active {
  background-color: rgb(237, 180, 180);
}

#mch-stacks-wildfire > div.active {
  background-color: rgb(250, 0, 0);
}

#mch-stacks-wildfire > div.fix {
  background-color: rgb(190, 80, 70);
}

#blm-stacks-heart > div.active {
  background-color: rgb(174, 227, 235);
}

#blm-stacks-xeno > div.active {
  background-color: rgb(200, 50, 200);
}

#smn-stacks-ruin4 > div.active {
  background-color: rgb(65, 0, 200);
}

#smn-stacks-ruby > div.active {
  background-color: rgb(240, 30, 30);
}

#smn-stacks-emerald > div.active {
  background-color: rgb(0, 140, 0);
}

#smn-stacks-topaz > div.active {
  background-color: rgb(238, 234, 14);
}

/* Procs */

/*
  Relative to #bars
  In general, jobs has ui such that the health bar can appear on top
  of the ffxiv target+buffs bar, with the procs appearing underneath.
  All jobs should have procs in roughly the same spot, and the
  entire bars + procs should be roughly 250px wide, 210px tall.
*/

#procs-container {
  position: absolute;
  top: 146px;
  left: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  width: 210px;
  height: 210px;
}

#procs-container.compact {
  top: 80px;
}

#procs-container > div {
  display: flex;

  /* every box is 50px big */
  width: 50px;
}

/* Colors */
.bar-border-color {
  background-color: rgb(30, 30, 30);
}

.hp-color {
  background-color: rgb(59, 133, 4);
}

.hp-color.low {
  background-color: rgb(190, 43, 30);
}

.hp-color.mid {
  background-color: rgb(127, 185, 29);
}

.mp-color {
  background-color: rgb(188, 55, 147);
}

.mp-color.far {
  background-color: rgb(215, 120, 0);
}

.mp-color.low {
  background-color: rgb(210, 20, 65);
}

.mp-color.medium {
  background-color: rgb(65, 0, 200);
}

.mp-tick-color {
  background-color: rgb(133, 192, 231);
}

.mp-tick-color.ice {
  background-color: rgb(30, 80, 245);
}

.mp-tick-color.fire {
  background-color: rgb(229, 56, 53);
}

.cp-color {
  background-color: rgb(75, 135, 230);
}

.gp-color {
  background-color: rgb(20, 50, 20);
}

.combo-color {
  background-color: rgb(180, 200, 220);
}

/* PLD */
.pld-color-oath {
  background-color: rgb(255, 210, 45);
}

.pld-color-oath.mid {
  background-color: rgb(255, 255, 100);
}

.pld-color-oath.low {
  background-color: rgb(255, 255, 200);
}

.pld-color-atonement {
  background-color: rgb(214, 237, 255);
}

.pld-color-atonement.any {
  background-color: rgb(25, 156, 255);
}

.pld-color-gore {
  background-color: rgb(255, 135, 35);
}

/* WAR */
.war-color-beast {
  background-color: rgb(230, 20, 20);
}

.war-color-beast.low {
  background-color: rgb(255, 235, 153);
}

.war-color-beast.mid {
  background-color: rgb(255, 153, 0);
}

.war-color-eye {
  background-color: rgb(60, 100, 210);
}

/* DRK */
.drk-color-blood {
  background-color: rgb(255, 0, 10);
}

.drk-color-blood.low {
  background-color: rgb(60, 0, 10);
}

.drk-color-blood.mid {
  background-color: rgb(200, 0, 10);
}

.drk-color-darkside {
  background-color: rgb(129, 33, 138);
}

.drk-color-bloodweapon {
  background-color: rgb(133, 0, 0, 0.7);
}

.drk-color-bloodweapon.active {
  background-color: rgb(199, 0, 0);
}

.drk-color-delirium {
  background-color: rgb(255, 80, 80, 0.6);
}

.drk-color-delirium.active {
  background-color: rgb(255, 80, 80);
}

.drk-color-livingshadow {
  background-color: rgb(123, 58, 126, 0.5);
}

.drk-color-livingshadow.active {
  background-color: rgb(179, 0, 189);
}

/* GNB */
.gnb-color-cartridge {
  background-color: rgb(115, 218, 255);
}

.gnb-color-cartridge.full {
  background-color: rgb(250, 86, 45);
}

.gnb-color-gnashingfang {
  background-color: rgb(216, 111, 12);
}

.gnb-color-nomercy {
  background-color: rgba(232, 127, 127, 0.7);
}

.gnb-color-nomercy.active {
  background-color: rgb(232, 127, 127);
}

.gnb-color-bloodfest {
  background-color: rgb(9, 81, 98);
}

/* WHM */
.whm-color-dia {
  background-color: rgb(120, 170, 250);
}

.whm-color-assize {
  background-color: rgb(62, 224, 170);
}

.whm-color-lucid {
  background-color: rgb(227, 148, 210);
}

.whm-color-lily {
  background-color: rgb(60, 80, 200);
}

.whm-color-lilysecond {
  background-color: rgb(120, 170, 250);
}

.whm-color-lilysecond.full {
  background-color: rgb(240, 30, 30);
}

/* SCH */
.sch-color-bio {
  background-color: rgb(60, 80, 200);
}

.sch-color-aetherflow {
  background-color: rgb(255, 96, 207);
}

.sch-color-aetherflow.too-much-stacks {
  background-color: rgb(240, 30, 30);
}

.sch-color-fairygauge {
  background-color: rgb(62, 224, 170);
}

.sch-color-fairygauge.bright {
  background-color: rgb(120, 170, 250);
}

.sch-color-lucid {
  background-color: rgb(227, 148, 210);
}

/* AST */
.ast-color-combust {
  background-color: rgb(120, 170, 250);
}

.ast-color-benefic {
  background-color: rgb(62, 224, 170);
}

.ast-color-helios {
  background-color: rgb(175, 235, 215);
}

.ast-color-draw {
  background-color: rgb(64, 65, 163);
}

.ast-color-card {
  background-color: rgb(180, 200, 220);
}

.ast-color-card.range {
  background-color: rgb(255, 96, 207);
}

.ast-color-card.melee {
  background-color: rgb(120, 170, 250);
}

.ast-color-seal {
  background-color: rgb(180, 200, 220);
}

.ast-color-seal.ready {
  background-color: rgb(62, 224, 170);
}

.ast-color-lucid {
  background-color: rgb(227, 148, 210);
}

/* SGE */
.sge-color-adder {
  background-color: rgb(120, 170, 250);
}

.sge-color-dosis {
  background-color: rgb(195, 85, 155);
}

.sge-color-rhizomata {
  background-color: rgb(40, 95, 150);
}

.sge-color-lucid {
  background-color: rgb(227, 148, 210);
}

/* MNK */
.mnk-color-chakra {
  background-color: rgb(230, 20, 20);
}

.mnk-color-chakra.dim {
  background-color: rgba(244, 194, 66, 0.3);
}

.mnk-color-form {
  background-color: rgb(180, 200, 220);
}

.mnk-color-pb {
  background-color: rgb(200, 130, 0);
}

.mnk-color-dragonkick {
  background-color: rgb(200, 130, 0);
}

.mnk-color-twinsnakes {
  background-color: rgb(215, 80, 70);
}

.mnk-color-demolish {
  background-color: rgb(60, 80, 200);
}

/* DRG */
.drg-color-disembowel {
  background-color: rgba(0, 255, 255, 0.7);
}

.drg-color-blood {
  background-color: rgba(180, 200, 220);
}

.drg-color-blood.blood {
  background-color: rgba(0, 89, 255, 0.5);
}

.drg-color-blood.life {
  background-color: rgba(217, 51, 0);
}

.drg-color-eyes {
  background-color: rgba(180, 200, 220);
}

.drg-color-eyes.zero {
  background-color: rgba(0, 89, 255, 0.5);
}

.drg-color-eyes.one {
  background-color: rgba(200, 50, 200, 0.7);
}

.drg-color-eyes.two {
  background-color: rgba(217, 51, 0);
}

.drg-color-highjump {
  background-color: rgb(35, 100, 255);
}

.drg-color-lancecharge {
  background-color: rgb(100, 15, 15);
}

.drg-color-lancecharge.active {
  background-color: rgb(217, 51, 0);
}

.drg-color-dragonsight {
  background-color: rgb(187, 42, 42, 0.8);
}

.drg-color-dragonsight.active {
  background-color: rgb(217, 51, 0);
}

/* NIN */
.nin-color-huton {
  background-color: rgb(0, 255, 255);
}

.nin-color-trickattack {
  background-color: rgb(255, 200, 0, 0.6);
}

.nin-color-trickattack.active {
  background-color: rgb(255, 200, 0);
}

.nin-color-bunshin {
  background-color: rgb(250, 80, 0);
}

.nin-color-ninjutsu {
  background-color: rgb(250, 150, 250);
}

.nin-color-ninki.low {
  background-color: rgb(140, 90, 200);
}

.nin-color-ninki {
  background-color: rgb(200, 50, 20, 0.7);
}

.nin-color-ninki.high {
  background-color: rgb(255, 42, 0);
}

/* SAM */
.sam-color-kenki {
  background-color: rgb(255, 150, 150);
}

.sam-color-kenki.high {
  background-color: rgb(255, 50, 50);
}

.sam-color-meditation {
  background-color: rgb(188, 76, 35);
}

.sam-color-meditation.high {
  background-color: rgb(255, 255, 160);
}

.sam-color-fuka {
  background-color: rgb(200, 180, 90);
}

.sam-color-fugetsu {
  background-color: rgb(60, 160, 160);
}

.sam-color-tsubamegaeshi {
  background-color: rgb(150, 100, 230);
}

.sam-color-higanbana {
  background-color: rgb(220, 115, 60);
}

/* BRD */
.brd-color-causticbite {
  background-color: rgb(182, 68, 235);
}

.brd-color-stormbite {
  background-color: rgb(72, 117, 202);
}

.brd-color-straightshotready {
  background-color: rgb(240, 130, 80);
}

.brd-color-song {
  background-color: rgb(180, 200, 220);
}

.brd-color-song.minuet {
  background-color: rgb(100, 150, 100);
}

.brd-color-song.minuet.full {
  background-color: rgb(250, 150, 0);
}

.brd-color-song.ballad {
  background-color: rgb(143, 90, 143);
}

.brd-color-song.paeon {
  background-color: rgb(207, 205, 52);
}

.brd-color-soulvoice {
  background-color: rgb(180, 200, 220);
}

.brd-color-soulvoice.high {
  background-color: rgb(250, 100, 0);
}

/* MCH */
.mch-color-heat {
  background-color: rgb(250, 100, 0);
}

.mch-color-heat.overheat {
  background-color: rgb(250, 0, 0);
}

.mch-color-battery {
  background-color: rgb(60, 110, 110);
}

.mch-color-battery.robot-active {
  background-color: rgb(80, 200, 200);
}

.mch-color-drill {
  background-color: rgb(235, 235, 50);
}

.mch-color-airanchor {
  background-color: rgba(80, 200, 200, 0.5);
}

.mch-color-wildfire {
  background-color: rgba(190, 80, 70);
}

.mch-color-wildfire.active {
  background-color: rgba(250, 0, 0);
}

/* DNC */
.dnc-color-standardstep {
  background-color: rgb(235, 235, 50);
}

.dnc-color-technicalstep {
  background-color: rgb(80, 200, 200, 0.7);
}

.dnc-color-technicalstep.active {
  background-color: rgb(80, 200, 200);
}

.dnc-color-flourish {
  background-color: rgb(150, 100, 0);
}

.dnc-color-flourish.active {
  background-color: rgb(255, 145, 0);
}

.dnc-color-esprit {
  background-color: rgb(255, 200, 0, 0.7);
}

.dnc-color-esprit.high {
  background-color: rgb(255, 50, 150);
}

.dnc-color-feather {
  background-color: rgb(160, 200, 50);
}

/* BLM */
.blm-color-thunder {
  background-color: rgb(64, 65, 163);
}

.blm-color-dot {
  background-color: rgb(110, 186, 245);
}

.blm-color-fire {
  background-color: rgb(217, 51, 0);
}

.blm-umbral-timer.fire {
  background-color: rgb(229, 56, 53);
}

.blm-umbral-timer.ice {
  background-color: rgb(30, 80, 245);
}

.blm-xeno-timer {
  background-color: rgba(0, 0, 0, 0.3);
}

.blm-xeno-timer.active {
  background-color: rgb(200, 50, 200);
}

/* Pulse effect for xeno overwrite */
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(200, 50, 200, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(200, 50, 200, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(200, 50, 200, 0);
  }
}

.blm-xeno-timer.pulse {
  box-shadow: 0 0 0 0 rgba(200, 50, 200, 1);
  animation: pulse 1s infinite;
}

/* SMN */
.smn-color-ruin {
  background-color: rgb(150, 233, 140);
}

.smn-color-aetherflow {
  background-color: rgb(255, 96, 207);
}

.smn-color-aetherflow.too-much-stacks {
  background-color: rgb(240, 30, 30);
}

.smn-color-biosmn {
  background-color: olivedrab;
}

.smn-color-miasma {
  background-color: cornflowerblue;
}

.smn-color-energydrain {
  background-color: brown;
}

.smn-color-trance {
  background-color: rgb(60, 80, 200);
}

.smn-color-demisummon {
  background-color: rgb(180, 200, 220);
}

.smn-color-demisummon.bahamutready {
  background-color: rgb(64, 65, 163);
}

.smn-color-demisummon.firebirdready {
  background-color: orange;
}

.smn-color-demisummon.last {
  background-color: rgb(240, 30, 30);
}

.smn-color-demisummon.ifrit {
  background-color: rgb(240, 30, 30);
}

.smn-color-demisummon.garuda {
  background-color: rgb(0, 140, 0);
}

.smn-color-demisummon.titan {
  background-color: rgb(238, 234, 14);
}

.smn-color-lucid {
  background-color: rgb(227, 148, 210);
}

/* RDM */
.rdm-color-white-mana {
  background-color: rgb(220, 220, 240);
}

.rdm-color-black-mana {
  background-color: rgb(47, 100, 208);
}

.rdm-color-white-mana.dim {
  background-color: rgb(100, 100, 100);
}

.rdm-color-black-mana.dim {
  background-color: rgb(13, 76, 80);
}

.rdm-color-lucid {
  background-color: rgb(227, 148, 210);
}

/* BLU */
.blu-color-offguard {
  background-color: rgb(210, 255, 196);
}

.blu-color-torment {
  background-color: rgb(168, 65, 45);
}

.blu-color-lucid {
  background-color: rgb(227, 148, 210);
}

/* Proc box animation */
.proc-box.in-combat .notify-when-expired.expired {
  display: block;
  animation: var(--proc-box-notfy-animation, proc-box-flash) var(--proc-box-notify-duration, 1s) var(--proc-box-notify-repeat, infinite);
}

@keyframes proc-box-flash {
  50% {
    opacity: 0;
  }
}

/** hide bars except hp-bar and mp-bar */
#jobs-container[data-inpvp="true"] #procs-container,
#jobs-container[data-inpvp="true"] #opacity-container > #bars > div:not(#hp-bar):not(#mp-bar) {
  display: none;
}
